import React from "react"

const NotFoundPage: React.FC = () => {
  const homePath = "/"
  const companyName = "Fromsko"

  return (
    <div
      className="
        min-h-screen
        flex
        flex-col
        items-center
        justify-center
        bg-gradient-to-br from-blue-50 to-indigo-100
        text-gray-800
        p-4
        sm:p-8
        font-sans
      "
    >
      <div
        className="
          bg-white
          rounded-xl
          shadow-2xl
          p-8
          sm:p-12
          text-center
          max-w-md
          w-full
          space-y-6
          transform
          hover:scale-105
          transition-transform duration-300 ease-in-out
          [box-shadow:0_15px_30px_rgba(0,0,0,0.1)]
        "
      >
        <h1
          className="
            text-7xl
            sm:text-8xl
            font-extrabold
            text-indigo-600
            drop-shadow-lg
          "
        >
          404
        </h1>
        <h2
          className="
            text-3xl
            sm:text-4xl
            font-bold
            text-gray-900
            leading-tight
          "
        >
          页面未找到
        </h2>
        <p
          className="
            text-lg
            text-gray-600
            mt-4
          "
        >
          页面似乎不存在或已被移动
        </p>
        <div
          className="
            mt-8
            flex
            flex-col
            sm:flex-row
            items-center
            justify-center
            gap-4
          "
        >
          <a
            href={homePath}
            className="
              inline-flex
              items-center
              px-6
              py-3
              border border-transparent
              text-base
              font-medium
              rounded-full
              shadow-lg
              text-white
              bg-indigo-600
              hover:bg-indigo-700
              focus:outline-none
              focus:ring-2
              focus:ring-offset-2
              focus:ring-indigo-500
              transition ease-in-out duration-150
              transform hover:-translate-y-0.5
            "
            aria-label="返回首页"
          >
            返回首页
          </a>
          <button
            onClick={() => window.history.back()}
            className="
              inline-flex
              items-center
              px-6
              py-3
              border border-gray-300
              text-base
              font-medium
              rounded-full
              text-gray-700
              bg-white
              hover:bg-gray-50
              focus:outline-none
              focus:ring-2
              focus:ring-offset-2
              focus:ring-indigo-500
              transition ease-in-out duration-150
              transform hover:-translate-y-0.5
            "
            aria-label="返回上一页"
          >
            返回上一页
          </button>
        </div>
      </div>
      <footer
        className="
          mt-10
          text-gray-500
          text-sm
        "
      >
        © {new Date().getFullYear()} {companyName} All rights reserved.
      </footer>
    </div>
  )
}

export default NotFoundPage
